<template>
  <div class="home-container">
    <div class="home_wap" ref="homewap">
      <span class="title">欢迎使用</span>
      <div class="imgwap">
        <el-carousel :interval="4000"  :height="boxheigt">
          <el-carousel-item v-for="item in carouselarr" :key="item">
            <img :src="item.src" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "home",
  data() {
    return {
      boxheigt:"500px",
      carouselarr: [
        { src: require("../../assets/image/homeBanner.png") },
        // { src: require("../../assets/image/homeBanner.png") },
        // { src: require("../../assets/image/login/2.png") }
      ],
      screenheight: ""
    };
  },
  mounted() {
    this.screenheight = document.documentElement.clientHeight - 100;
    this.$refs.homewap.style.height = this.screenheight + "px";
    this.boxheigt = this.screenheight*0.55+"px"
  },
  computed: {
    ...mapGetters(["name", "roles"])
  },
  created() {
    console.dir(this.$route);
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home-container {
  .title {
    display: inline-block;
    width: 100%;
    margin: 5.5% 0;
    text-align: center;
    margin-bottom: 6.5%;
  }
  .imgwap {
    margin-top: 50%;
    width: 60%;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  margin-top: 30px;
  // margin: 30px;
  font-size: 36px;
  .home_wap {
    width: 90%;
    margin: 0 auto;
    // background: red;
    background: #ffffff;
    margin-bottom: 20px;
    border-radius: 12px;
  }
}
</style>
